<template>
  <div class="app-container calendar-list-container backcontent">
      <div class="titleCss">商户信息</div>
      <div class="bg-cust-detail">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple-light">用户编号: {{ customerBase.customerId }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">登录密码错误次数: {{ customerBase.passwordErrorCount }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">支付密码错误次数: {{ customerBase.payPasswordErrorCount }}</div></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">认证状态: 
              <span v-if="customerBase.authenticationStatus === '00'">未认证</span>
              <span v-if="customerBase.authenticationStatus === '01'">无需认证 </span>
              <span v-if="customerBase.authenticationStatus === '02'">认证成功 </span>
              <span v-if="customerBase.authenticationStatus === '03'">认证失败 </span>
            </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple-light">注册时间: {{ customerBase.registerTime }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">上次登录时间: {{ customerBase.loginTime }}</div></el-col>
        </el-row>
      </div>
      
      <div class="titleCss">商户信息</div>
      <div class="bg-cust-detail">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple-light">商户号: {{ merchant.merchantId }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">商户名称: {{ merchant.merchantName }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">平台编号: {{ merchant.platformId }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">用户编号: {{ merchant.customerId }}</div></el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">第三方商户编号: {{ merchant.thirdNo }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">父级商户编号: {{ merchant.parentMerId }}</div></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">商户类型: 
              <span v-if="merchant.merType == '00'">
                普通商户
              </span>
              <span v-if="merchant.merType == '01'">
                子商户
              </span>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">企业名称: {{ merchant.companyName }}</div></el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">经营范围: {{ merchant.businessScope }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">工商注册号: {{ merchant.businessNo }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">法人姓名: {{ merchant.legalPersonName }}</div></el-col>
          <el-col :span="6">
              <div class="grid-content bg-purple-light">法人证件类型: 
                <span v-if="merchant.legalPersonCredType == '0'">
                  身份证
                </span>
                <span v-if="merchant.legalPersonCredType == '1'">
                  户口本
                </span>
                <span v-if="merchant.legalPersonCredType == '2'">
                  护照
                </span>
                <span v-if="merchant.legalPersonCredType == '3'">
                  军官证
                </span>
                <span v-if="merchant.legalPersonCredType == '4'">
                  士兵证
                </span>
                <span v-if="merchant.legalPersonCredType == '5'">
                  港澳居民往来内地通行证
                </span>
                <span v-if="merchant.legalPersonCredType == '6'">
                  台湾通报往来内地通行证
                </span>
                <span v-if="merchant.legalPersonCredType == '7'">
                  临时身份证
                </span>
                <span v-if="merchant.legalPersonCredType == '8'">
                  外国人居留证
                </span>
                <span v-if="merchant.legalPersonCredType == '9'">
                  警官证
                </span>
                <span v-if="merchant.legalPersonCredType == 'x'">
                  其他证件
                </span>
              </div>
          </el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">法人证件号码: {{ merchant.legalPersonCredNo }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">营业执照: {{ merchant.businessLicence }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">联系电话: {{ merchant.phone }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">企业座机: {{ merchant.mobile }}</div></el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">企业传真: {{ merchant.fax }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">企业网址: {{ merchant.httpAddress }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">注册资金: {{ merchant.registeredCapital }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">企业地址: {{ merchant.companyAddress }}</div></el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">企业传真: {{ merchant.fax }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">企业网址: {{ merchant.httpAddress }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">注册资金: {{ merchant.registeredCapital }}</div></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">认证状态: 
              <span v-if="merchant.authenticationStatus == '00'">
                  未认证
              </span>
              <span v-if="merchant.authenticationStatus == '01'">
                  无需认证
              </span>
              <span v-if="merchant.authenticationStatus == '02'">
                  认证成功
              </span>
              <span v-if="merchant.authenticationStatus == '03'">
                  认证失败
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row>            
          <el-col :span="6">
            <div class="grid-content bg-purple-light">账户状态:
              <span v-if="merchant.status == '00'">正常</span>
              <span v-if="merchant.status == '01'">冻结</span>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">创建时间: {{ merchant.createTime }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">更新时间: {{ merchant.updateTime }}</div></el-col>
        </el-row>
        <el-row>            
          <el-col :span="6"><div class="grid-content bg-purple-light">归属人: {{ merchant.owner }}</div></el-col>
        </el-row>
      </div>
      
      <div class="titleCss">账户信息</div>
      <div class="bg-cust-detail">
        <el-row  v-for="(item, index) in accountList" :key="index">
          <el-col :span="6"><div class="grid-content bg-purple-light">账号类型: 
              <span v-if="item.accountType === 'ACC001'">余额账户</span>
              <span v-if="item.accountType === 'ACC002'">红包账户 </span>
              <span v-if="item.accountType === 'ACC003'">积分账户 </span>
              <span v-if="item.accountType === 'ACC004'">手续费账户 </span>
              <span v-if="item.accountType === 'ACC005'">已结算账户 </span>
              <span v-if="item.accountType === 'ACC006'">交易金额账户 </span>
              <span v-if="item.accountType === 'ACC007'">冻结金额账户 </span>
              <span v-if="item.accountType === 'ACC008'">平台管理账户 </span>
              <span v-if="item.accountType === 'ACC009'">平台服务费账户 </span>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">币种: {{ item.ccy }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">账户余额: {{ item.accountBalance }}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple">冻结金额: {{ item.freezeBalance }}</div></el-col>
        </el-row>
      </div>
      
      <div class="titleCss">平台通道配置    <el-button size="small" type="primary" @click="handleAddPayConfig">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="payChannelList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="平台编号" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.platformId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商户号" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.merchantId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付通道编号" width="200">
            <template scope="scope">
              <span>{{scope.row.payChannelNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付通道名称" width="200">
            <template scope="scope">
              <span>{{scope.row.payChannelName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付公司编号" width="200">
            <template scope="scope">
              <span>{{scope.row.payCompanyNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户类型" width="200">
            <template scope="scope">
              <span v-if="scope.row.customerType == 'CUST00'">平台</span>
              <span v-if="scope.row.customerType == 'CUST01'">商户</span>
              <span v-if="scope.row.customerType == 'CUST02'">用户</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="费率代码" width="200">
            <template scope="scope">
              <span>{{scope.row.feeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方商户号 APPID" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方子商户号" width="200">
            <template scope="scope">
              <span>{{scope.row.outSubMerNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方账号" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerAccount}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方公钥" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerPublicKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方私钥" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerPrivateKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="加密方式" width="200">
            <template scope="scope">
              <span>{{scope.row.encryptionMethod}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证书地址" width="200">
            <template scope="scope">
              <span>{{scope.row.keyPath}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证书密码" width="200">
            <template scope="scope">
              <span>{{scope.row.keyPwd}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="200">
            <template scope="scope">
              <span v-if="scope.row.status == '0'">开启</span>
              <span v-if="scope.row.status == '1'">关闭</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template scope="scope">
              <el-button type="primary" size="small" @click="handleUpdatePay(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status == '1'" type="primary" size="small" @click="handleOpen(scope.row)">启用</el-button>
              <el-button v-if="scope.row.status == '0'" type="primary" size="small" @click="handleClose(scope.row)">关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
      <!-- 支付通道配置 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddPayChannel">
          <el-form ref="payChannelForm"  :rules="rulePay" :model="payChannelForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
              <el-form-item label="平台编号: " prop="platformId">
                  <el-input v-model="payChannelForm.platformId" disabled=""></el-input>
              </el-form-item>
              <el-form-item label="商户号: " prop="merchantId">
                  <el-input v-model="payChannelForm.merchantId" disabled=""></el-input>
              </el-form-item>
              <el-form-item label="支付通道名称: " prop="payChannelName">
                  <el-select v-model="payChannelForm.payChannelName" placeholder="请选择" size="small"  clearable="">
                    <el-option v-for="(p,index) in payChannels" :label="p.payChannelName" :value="p.payChannelNo+'&'+p.payChannelName+'&'+p.payCompanyNo" :key="index"></el-option>
                  </el-select> 
              </el-form-item>
              <el-form-item label="客户类型： " prop="customerType" >
                  <el-select class="filter-item" v-model="payChannelForm.customerType" placeholder="请选择" clearable="">
                      <el-option label="平台" value="CUST00"> </el-option>
                      <el-option label="商户" value="CUST01"> </el-option>
                      <el-option label="用户" value="CUST02"> </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="费率: " prop="feeCode">
                  <el-select class="filter-item" v-model="payChannelForm.feeCode" placeholder="请选择" clearable="">
                      <el-option v-for="item in feeList" :key="item.feeCode" :label="item.feeName" :value="item.feeCode"> </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="第三方商户号: " prop="outMerNo">
                  <el-input v-model="payChannelForm.outMerNo" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="第三方账号: " prop="outMerAccount">
                  <el-input v-model="payChannelForm.outMerAccount" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="第三方公钥: " prop="outMerPublicKey">
                  <el-input v-model="payChannelForm.outMerPublicKey" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="第三方私钥: " prop="outMerPrivateKey">
                  <el-input v-model="payChannelForm.outMerPrivateKey" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="第三方子商户号: " prop="outSubMerNo">
                  <el-input v-model="payChannelForm.outSubMerNo" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="证书地址: " prop="keyPath">
                  <el-input v-model="payChannelForm.keyPath" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="证书密码: " prop="keyPwd">
                  <el-input v-model="payChannelForm.keyPwd" clearable=""></el-input>
              </el-form-item>
              <el-form-item label="加密方式: " prop="encryptionMethod">
                  <el-select class="filter-item" v-model="payChannelForm.encryptionMethod" placeholder="请选择" clearable="">
                      <el-option label="MD5" value="MD5"> </el-option>
                      <el-option label="RSA" value="RSA"> </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="状态: " prop="status">
                  <el-select class="filter-item" v-model="payChannelForm.status" placeholder="请选择" clearable="">
                      <el-option label="开启" value="0"> </el-option>
                      <el-option label="关闭" value="1"> </el-option>
                  </el-select>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogAddPayChannel = false">取消</el-button>
              <el-button v-if="dialogStatus === 'create'" type="primary" @click="createPayChannelConfig('payChannelForm')">保存</el-button>
              <el-button v-if="dialogStatus === 'update'" type="primary" @click="updatePayChannelConfig('payChannelForm')">保存</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import { pagePayChannelConfig, addPayChannelConfig, updatePayChannelConfig } from '@/api/crm/platform/index'
import { queryAllFeeNoPage } from '@/api/pay/channelFee'
import { getObjByMerchantId, queryCustInfoAndAccountInfo } from '@/api/crm/customers/merchantBase'
import { mapGetters } from 'vuex'
import { allChannel } from '@/api/pay/channel'
export default {
  name: 'personalBaseDetail',
  data() {
    return {
      merchant: {
        id: undefined,
        merchantId: undefined,
        merchantName: undefined,
        platformId: undefined,
        customerId: undefined,
        thirdNo: undefined,
        parentMerId: undefined,
        merType: undefined,
        companyName: undefined,
        businessScope: undefined,
        businessNo: undefined,
        legalPersonName: undefined,
        legalPersonCredType: undefined,
        legalPersonCredNo: undefined,
        businessLicence: undefined,
        phone: undefined,
        mobile: undefined,
        fax: undefined,
        httpAddress: undefined,
        registeredCapital: undefined,
        companyAddress: undefined,
        authenticationStatus: undefined,
        status: undefined,
        createTime: undefined,
        updateTime: undefined,
        owner: undefined
      },
      dialogAddPayChannel: false,
      listLoading: false,
      textMap: {
        create: '创建',
        update: '编辑'
      },
      listQuery: {
        page: 0,
        limit: 10,
        platformId: '',
        merchantId: ''
      },
      payChannelForm: {
        platformId: '',
        merId: '',
        merchantId: '',
        payChannelName: '',
        payChannelNameStr: '',
        payChannelNo: '',
        payCompanyNo: '',
        customerType: '',
        outMerNo: '',
        outSubMerNo: '',
        outMerAccount: '',
        outMerPublicKey: '',
        outMerPrivateKey: '',
        encryptionMethod: '',
        keyPath: '',
        keyPwd: '',
        status: '',
        feeCode: ''
      },
      rulePay: {},
      total: 0,
      dialogStatus: '',
      payChannels: [],
      payChannelList: [],
      feeList: [],
      customerBase: {
        id: '',
        customerId: '',
        customerType: '',
        passwordErrorCount: '',
        payPasswordErrorCount: '',
        authenticationStatus: '',
        registerTime: '',
        loginTime: ''
      },
      accountList: []
    }
  },
  created() {
  },
  mounted() {
    console.log('==============================')
    console.log(this.$route.query.row)
    this.merchant = this.$route.query.row
    if (this.merchant === undefined) {
      var merchantIdv = this.$route.query.merchantId
      console.log('merchantIdv:' + merchantIdv)
      this.getObjByMerchantId(merchantIdv)
    } else {
      this.getPayChannelConfigs()
      this.queryCustInfoAndAccountInfo()
    }
  },
  computed: {
    ...mapGetters([
      'elements',
      'name'
    ])
  },
  methods: {
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {

    },
    handleUpdatePay(row) {
      this.payChannelForm = row
      this.dialogStatus = 'update'
      this.dialogAddPayChannel = true
      this.queryAllFeeNoPage()
    },
    getObjByMerchantId(merchantId) {
      getObjByMerchantId(merchantId).then(response => {
        console.log('=======getObjByMerchantId====getObjByMerchantId=========')
        console.log(response)
        if (response !== null && response !== '') {
          this.merchant = response
          this.getPayChannelConfigs()
          this.queryCustInfoAndAccountInfo()
        }
      })
    },
    queryCustInfoAndAccountInfo() {
      console.log('00000000000000000000000000000000000000000000000000000000000000000000000000000000')
      queryCustInfoAndAccountInfo(this.merchant.merchantId).then(response => {
        console.log('=======queryCustInfoAndAccountInfo====queryCustInfoAndAccountInfo=========')
        console.log(response)
        if (response !== null && response !== '') {
          if (response.code === '0000') {
            this.customerBase = response.customerBase
            this.accountList = response.accountList
          }
        }
      })
    },
    updatePayChannelConfig(formName) {
      var str = this.payChannelForm.payChannelName
      this.payChannelForm.payChannelName = str.split('&')[1]
      this.payChannelForm.payChannelNo = str.split('&')[0]
      this.payChannelForm.payCompanyNo = str.split('&')[2]
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogAddPayChannel = false
          updatePayChannelConfig(this.payChannelForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getPayChannelConfigs()
          })
        } else {
          return false
        }
      })
    },
    queryAllFeeNoPage() {
      queryAllFeeNoPage()
        .then(response => {
          console.log('----------queryAllFeeNoPage-----------')
          console.log(response)
          this.feeList = response
        }).catch(() => {
        })
    },
    createPayChannelConfig(formName) {
      const set = this.$refs
      this.payChannelForm.platformId = this.merchant.platformId
      var str = this.payChannelForm.payChannelName
      this.payChannelForm.payChannelName = str.split('&')[1]
      this.payChannelForm.payChannelNo = str.split('&')[0]
      this.payChannelForm.payCompanyNo = str.split('&')[2]
      this.payChannelForm.merchantId = this.merchant.merchantId
      console.log('--------payChannelForm--------')
      console.log(this.payChannelForm)
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加支付通道配置, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogAddPayChannel = false
            addPayChannelConfig(this.payChannelForm).then((response) => {
              if (response.code === '0000') {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 5000
                })
                this.getPayChannelConfigs()
              }
              this.listLoading = false
            })
          })
        } else {
          return false
        }
      })
    },
    getPayChannelConfigs() {
      this.listQuery.platformId = this.merchant.platformId
      this.listQuery.merchantId = this.merchant.merchantId
      pagePayChannelConfig(this.listQuery)
        .then(response => {
          console.log('--------====pagePayChannelConfig=====-------------')
          console.log(response)
          this.payChannelList = response.body.data.rows
          this.total = response.body.data.total4
        })
    },
    getPayChannels() {
      var str = {}
      allChannel(str)
        .then(response => {
          console.log(response)
          if (response.success) {
            this.payChannels = response.body.data.rows
          }
        }).catch(() => {
          this.payChannels = []
        })
    },
    handleAddPayConfig() {
      this.resetForm()
      this.payChannelForm.platformId = this.merchant.platformId
      this.payChannelForm.merchantId = this.merchant.merchantId
      this.dialogStatus = 'create'
      this.dialogAddPayChannel = true
      this.queryAllFeeNoPage()
      this.getPayChannels()
    },
    handleOpen(row) {
      this.payChannelForm = row
      this.payChannelForm.status = '0'
      updatePayChannelConfig(this.payChannelForm).then(response => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        this.getPayChannelConfigs()
      })
    },
    handleClose(row) {
      this.payChannelForm = row
      this.payChannelForm.status = '1'
      updatePayChannelConfig(this.payChannelForm).then(response => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        this.getPayChannelConfigs()
      })
    },
    resetForm() {
      this.payChannelForm = {
        platformId: '',
        merchantId: '',
        merId: '',
        payChannelName: '',
        payChannelNameStr: '',
        payChannelNo: '',
        payCompanyNo: '',
        customerType: '',
        outMerNo: '',
        outSubMerNo: '',
        outMerAccount: '',
        outMerPublicKey: '',
        outMerPrivateKey: '',
        encryptionMethod: '',
        keyPath: '',
        keyPwd: '',
        status: '',
        feeCode: ''
      }
    }
  }
}
</script>
<style>

.backcontent{
  background-color: #f0f2f5;
}
.bg-cust-detail {
  background-color: #ffffff;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
}
.titleCss{
  width: 100%;
  height: 60px;
  margin-bottom: 2px;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  line-height: 60px;
  background-color: #ffffff;
}
.bg-purple {
}
.bg-purple-light {
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 14px;
  line-height: 36px;
}
.titleCss .el-button{
  height: 28px !important;
  margin-left: 10px !important;
  padding: 6px 15px !important;
}
</style>
